<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<base href="${base}/" />
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
</head>
<script src="js/jquery-3.5.0.js"></script>
<script src="layer/layer.js"></script>
<style>
 	.litext{
 	display:block;
 	margin-right:-10px;
 	}
</style>
<script>
	function toAdd(){
		location.href="GoodsServelet?opr=initgoods";
	}
	var topage;
	
	 function dele(id,gname){
		 layer.confirm('您确定删除吗？', {
				btn : [ '确定', '取消' ]
			//按钮
			},function() {
				location.href = "GoodsServelet?opr=del&id="+id+"&gname="+gname;
			} , function() {
				return;
			})
		}
	
	let success="${success}" ;
	if(success){
		layer.alert(success);
	}
	
	let error="${error}" ;
	if(error){
		layer.alert(error);
	}
	let updateerror="${updateerror}" ;
	if(updateerror){
		layer.alert(updateerror);
	}
	let update="${update}" ;
	if(update){
		
		layer.alert(update);
	}
	
	window.addEventListener("load",function(){
		topage = function(page){
			document.getElementById("hid").value=page;
			document.getElementById("conditionform").submit();
		};
		
		function clear(){
			document.getElementById("categoryid").value="0";
			document.getElementById("status").value="";
			document.getElementById("goodsname").value="";
			document.getElementById("minstock").value="0";
			document.getElementById("maxstock").value="0";
		}
		
		document.getElementById("categoryid").value="${goods.categoryid}";
		document.getElementById("status").value="${goods.status}";
		
		document.getElementById("clear").addEventListener("click",clear);
		let pagesa =  document.getElementsByClassName("pagesa");
		let pageso =  document.getElementsByClassName("pageso");
		
		for(let i=0;i<pageso.length;i++){
			if(pageso[i].value== ${pb.nowPage}){
				pageso[i].selected=true;//将下拉框置为当前页
				
				//修改导航栏中当前页的样式，将当前页置为不可点击
				pagesa[i].style.backgroundColor="blue";
				pagesa[i].onclick="";
				return;
			}
		}
	})
</script>
<body>

	<div class="panel admin-panel">
		<div class="panel-head">
			<strong class="icon-reorder"> 商品列表</strong>
		</div>
		<div class="padding border-bottom">
			<button type="button" class="button border-green" id="checkall">
				<span class="icon-check"></span> 全选
			</button>
			<button type="submit" class="button border-red"  id="downshop">
				<span class="icon-trash-o"></span> 批量下架	
<!-- 				 onclick="handledata('正常')" onclick="handledata('下架')" -->
			</button>
			<button type="submit" class="button border-yellow"  id="upshop" >
				<span class="icon-plus-square-o"></span> 批量上架
			</button>
			<button type="button" class="button border-yellow" onclick='toAdd()'>
				<span class="icon-plus-square-o"></span>增加商品
			</button>
			<button type="button" class="button border-red" id='clear'>
				<span class="icon-trash-o"></span>一键清空查询条件
			</button>
		</div>

		<div class="padding border-bottom">
			<form method="post" action=GoodsServelet?opr=query id="conditionform">
				<input type="hidden" name="opr" value="query" /> <input
					type="hidden" id="hid" name="nowpage" />
				<ul class="search" style="padding-left: 10px;">
					<li>商品名称：<input type="text" placeholder="请输入商品名称" name="name"
						class="input" value="${goods.name}" id="goodsname"
						style="width: 150px; line-height: 17px; display: inline-block" />
					</li>
					<li class="litext">类别：</li>
					<li><select name="categoryid" class="input" id="categoryid"
						style="width: 120px; line-height: 17px;">
							<option value="0">不限</option>
							<c:forEach items="${categories}" var="category" varStatus="s">
								<option value="${category.id}">${category.name}</option>
							</c:forEach>
					</select></li>
					<li class="litext">状态：</li>
					<li><select name="status" class="input" id="status"
						style="width: 80px; line-height: 17px;">
							<option value="">不限</option>
							<option value="正常">正常</option>
							<option value="下架">下架</option>
					</select></li>
					<li>库存：<input type="text" placeholder="请输入最小库存"
						name="minstock" class="input" value="${goods.minstock}"
						id="minstock"
						style="width: 150px; line-height: 17px; display: inline-block" />--
						<input type="text" placeholder="请输入最大库存" name="maxstock"
						class="input" value="${goods.maxstock}" id="maxstock"
						style="width: 150px; line-height: 17px; display: inline-block" />
					</li>

					<li><button class="button border-main icon-search"
							onclick="submit()">搜索</button></li>
				</ul>
			</form>
		</div>
		<table class="table table-hover text-center">
			<tr>
				<th>选择</th>
				<th>序号</th>
				<th>商品名称</th>
				<th>图片</th>
				<th>类别</th>
				<th>库存</th>
				<th>市场价</th>
				<th>销售价</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${pb.list}" var="goods" varStatus="s">
				<tr>
					<td><input type="checkbox" class="choose"><input type="hidden" value="${goods.id}"></td>
					<td>${s.count}</td>
					<td>${goods.name}</td>
					<td><img src="${goods.image}" alt="${goods.name}"
						style="width: 100px; height: 120px"></td>
					<td>${goods.cname}</td>
					<td>${goods.stock}</td>
					<td>${goods.marketprice}</td>
					<td>${goods.saleprice}</td>
					<td>${goods.status}</td>
					<td><div class="button-group">
							<a class="button border-main" href="GoodsServelet?opr=initUpdate&id=${goods.id}"><span class="icon-edit"></span>
								修改</a> <a class="button border-red" href="javascript:void(0)"
								onclick= "dele('${goods.id}','${goods.name}')"><span class="icon-trash-o">删除</span></a>
						</div></td>
				</tr>
			</c:forEach>
			<tr>
				<td colspan="10">
					<div class="pagelist" id="topage">
						<a href="javascript:;" onclick="topage(1)" id="firstpage">首页</a> <a
							href="javascript:;" onclick="topage(${pb.nowPage-1})"
							id="previouspage">上一页</a>
						<c:forEach begin="1" end="${pb.totalPage}" var="p">
							<a href="javascript:;" onclick="topage(${p})" class="pagesa">${p}</a>
						</c:forEach>
						<a href="javascript:;" onclick="topage(${pb.nowPage+1})"
							id="nextpage">下一页</a> <a href="javascript:;"
							onclick="topage(${pb.totalPage})" id="endpage">尾页</a> <select
							onchange="topage(this.value)">
							<c:forEach begin="1" end="${pb.totalPage}" var="p">
								<option value="${p}" class="pageso">${p}</option>
							</c:forEach>
						</select>
					</div>
					<div>当前第${pb.nowPage}页，总共${pb.totalPage}页，本页${pb.nowNum}条数据</div>
				</td>
			</tr>
		</table>
	</div>
</body>
<script>
	//针对是否应该出现首尾页，上下页进行判断设置
	function checkpage(){
		let firstpage = document.getElementById("firstpage");
		let previouspage = document.getElementById("previouspage");
		let nextpage = document.getElementById("nextpage");
		let endpage = document.getElementById("endpage");
		
		if( ${pb.nowPage} == 1){
			firstpage.parentElement.removeChild(firstpage);
			previouspage.parentElement.removeChild(previouspage);
		}
		
		if( ${pb.nowPage} == ${pb.totalPage}){
			nextpage.parentElement.removeChild(nextpage);
			endpage.parentElement.removeChild(endpage);
		}
	}
	checkpage();
	
    // 对全选属性与下面的单选属性进行绑定
    let checkall = document.getElementById("checkall");
    let chooses = document.getElementsByClassName("choose");
    
    checkall.addEventListener("click", function(){
    	if(checkall.className=="button border-green"){
    		for (const temp of chooses) {
                temp.checked = true;
        	}
    		checkall.className="button border-red";
    		checkall.textContent="全不选";
        }else{
        	for (const temp of chooses) {
                temp.checked = false;
        	}
        	checkall.className="button border-green";
        	checkall.textContent="全选";
        }
    });
    
  //一键下架所有选中商品
	let downshop = document.getElementById("downshop");
	let upshop = document.getElementById("upshop");
	downshop.addEventListener("click",function(){
		handledata("下架")
	});
	upshop.addEventListener("click",function(){
		handledata("正常")
	});
	
// 	downshop.onclick= function(){
// 		handledata("下架")
// 	};
// 	console.log(upshop);
// 	upshop.onclick= function(){
// 		handledata('正常')
// 	};
	function handledata(ty){
		let chooses = document.getElementsByClassName("choose");
		let downlist=[];
		for(let choose of chooses){
			if(choose.checked){
				downlist[downlist.length]=parseInt(choose.nextElementSibling.value);
			}
		}
		if(downlist.length!=0){
			console.log(downlist);
			location.href="GoodsServelet?opr=downshop&data="+downlist+"&type="+ty;
		}
	}
</script>
</html>